<template>
  <div class="app-container">
    <div class="custom_card_0">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="0px">
        <el-form-item label="" prop="currUserStore">
          <el-select style="width:250px " filterable remote v-model="queryParams.currUserStore" clearable placeholder="请选择门店" @change="selectSeries">
            <el-option v-for="store in storeList" :key="store.id" :value="store.id" :label="store.name">{{ store.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="currSeries">
          <el-select style="width:250px " filterable remote v-model="queryParams.currSeries" clearable placeholder="请选择车系" @change="selectModel">
            <el-option v-for="series in seriesList" :key="series.id" :value="series.id" :label="series.name">{{ series.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="currModel">
          <el-select style="width:250px " filterable remote v-model="queryParams.currModel" clearable placeholder="请选择车型">
            <el-option v-for="model in modelList" :key="model.id" :value="model.id" :label="model.name">{{ model.name }}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="custom_card">
      <el-row :gutter="10" class="mb8">
        <el-tag style="margin-left: 10px;font-size: 16px">在店车辆总数:{{ carNum.zdzs || 0 }}辆</el-tag>
        <el-tag style="margin-left: 10px;font-size: 16px">预定中车辆总数:{{ carNum.yyyd || 0 }}辆</el-tag>
        <el-tag style="margin-left: 10px;font-size: 16px">用车中车辆总数:{{ carNum.yyyc || 0 }}辆</el-tag>
        <el-tag style="margin-left: 10px;font-size: 16px">空闲车辆总数:{{ carNum.yykx || 0 }}辆</el-tag>
        <el-tag style="margin-left: 10px;font-size: 16px">自有车辆总数:{{ carNum.zyzs || 0 }}辆</el-tag>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="inventoryStatisticsList" border :span-method="objectSpanMethod">
        <el-table-column label="车系" min-width="100" show-overflow-tooltip align="left">
          <template slot-scope="{row}">
            {{ row.brandName + '/' + row.seriesName }}
          </template>
        </el-table-column>
        <el-table-column label="车型" min-width="180" show-overflow-tooltip align="left" prop="modelName"/>

        <el-table-column label="在店车辆统计" align="center" label-class-name="zdtj_box">
          <el-table-column label="在店总数" align="center" prop="zdzs" label-class-name="zdtj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.zdzs" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zdzs.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zdzs" type="text">{{ row.zdzs.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="自有车辆" align="center" prop="zdzy" label-class-name="zdtj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.zdzy" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zdzy.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zdzy" type="text">{{ row.zdzy.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="借入车辆" align="center" prop="zdjr" label-class-name="zdtj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.zdjr" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zdjr.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zdjr" type="text">{{ row.zdjr.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="调入车辆" align="center" prop="zddr" label-class-name="zdtj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.zddr" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zddr.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zddr" type="text">{{ row.zddr.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="车辆运营统计" align="center" label-class-name="yytj_box">
          <el-table-column label="预定中" align="center" prop="yyyd" label-class-name="yytj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.yyyd" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.yyyd.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.yyyd" type="text">{{ row.yyyd.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="用车中" align="center" prop="yyyc" label-class-name="yytj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.yyyc" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.yyyc.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.yyyc" type="text">{{ row.yyyc.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="空闲" align="center" prop="yykx" label-class-name="yytj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.yykx" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.yykx.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.yykx" type="text">{{ row.yykx.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="自有车辆统计" align="center" label-class-name="zytj_box">
          <el-table-column label="自有总数" align="center" prop="zyzs" label-class-name="zytj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.zyzs" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zyzs.split(',')">
                      <span :class="item.length>7?'car_no_new':'car_no'">
                        {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                      </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zyzs" type="text">{{ row.zyzs.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="在店车辆" align="center" prop="zyzd" label-class-name="zytj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.zyzd" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zyzd.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zyzd" type="text">{{ row.zyzd.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="借出车辆" align="center" prop="zyjc" label-class-name="zytj_item">
            <template slot-scope="{row}">
              <el-popover :close-delay="0" v-if="row.zyjc" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zyjc.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zyjc" type="text">{{ row.zyjc.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column label="调出车辆" align="center" prop="zydc" label-class-name="zytj_item">
            <template slot-scope="{row}">

              <el-popover :close-delay="0" v-if="row.zydc" placement="top-start" trigger="click">
                <div style="max-width: 450px">
                  <div style="margin:5px;height: 40px;padding: 5px 0;display: inline-block" v-for="item in row.zydc.split(',')">
                    <span :class="item.length>7?'car_no_new':'car_no'">
                      {{ item.substr(0, 2) }}<b class="dian">·</b>{{ item.substr(2) }}
                    </span>
                  </div>
                </div>
                <el-button slot="reference" class="cell-btn" v-if="row.zydc" type="text">{{ row.zydc.split(',').length }}</el-button>
              </el-popover>
              <span v-else>0</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script>
import {inventoryStatistics, inventoryCount, tenantStoreList, selectSeries, selectModel} from '@/api/index';

export default {
  name: "CarStockStatistics",
  data() {
    return {
      // 遮罩层
      loading: true,
      takeTime: [new Date(new Date().getTime() - 31 * 24 * 60 * 60 * 1000), new Date()],
      // 导出遮罩层
      exportLoading: false,
      showSearch: true,

      // 总条数
      total: 0,
      storeList: [],
      seriesList: [],
      modelList: [],

      inventoryStatisticsList: [],

      carNum: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        currUserStore: null,
        currSeries: null,
        currModel: null
      }
    };
  },
  created() {
    this.tenantStoreList();
    this.getList();
  },
  methods: {
    open(val) {
      if (val) {
        this.$alert(val, '车牌号', {
          dangerouslyUseHTMLString: true
        });
      }
    },
    tenantStoreList() {
      tenantStoreList().then(res => {
        this.storeList = res.data
      })
    },
    selectSeries() {
      this.queryParams.currSeries = null;
      this.queryParams.currModel = null;
      selectSeries({storeId: this.queryParams.currUserStore}).then(res => {
        this.seriesList = res.data
      })
    },
    selectModel() {
      this.queryParams.currModel = null;
      selectModel({storeId: this.queryParams.currUserStore, seriesId: this.queryParams.currSeries}).then(res => {
        this.modelList = res.data
      })
    },
    /** 查询VIEW列表 */
    getList() {
      this.loading = true;
      inventoryStatistics(this.queryParams).then(response => {
        this.inventoryStatisticsList = response.rows;
        this.total = response.total;
        this.setrowspans();
        this.loading = false;
      });

      inventoryCount(this.queryParams).then(response => {
        this.carNum = {
          ...response.data
        };
      });
    },
    //获得数据相同的行数
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.inventoryStatisticsList.forEach(v => {
        v.rowspan = 1;
      });
      // 双层循环
      for (let i = 0; i < this.inventoryStatisticsList.length; i++) {
        for (let j = i + 1; j < this.inventoryStatisticsList.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (this.inventoryStatisticsList[i].seriesId == this.inventoryStatisticsList[j].seriesId) {
            this.inventoryStatisticsList[i].rowspan++;
            this.inventoryStatisticsList[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + this.inventoryStatisticsList[i].rowspan - 1;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
<style scoped>
.cell-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 15px;
  font-weight: bold;
}

/deep/ .zdtj_box {
  padding: 0;
}

/deep/ .zdtj_box .cell {
  background-color: #c6f7c0;
  padding: 0;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/deep/ .zdtj_item {
  padding: 0;
}

/deep/ .zdtj_item .cell {
  background-color: #e5ffe1;
  padding: 0;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/deep/ .yytj_box {
  padding: 0;
}

/deep/ .yytj_box .cell {
  background-color: #ffd8b1;
  padding: 0;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/deep/ .yytj_item {
  padding: 0;
}

/deep/ .yytj_item .cell {
  background-color: #fff2e6;
  padding: 0;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/deep/ .zytj_box {
  padding: 0;
}

/deep/ .zytj_box .cell {
  background-color: #9ad0f7;
  padding: 0;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/deep/ .zytj_item {
  padding: 0;
}

/deep/ .zytj_item .cell {
  background-color: #cee9fd;
  padding: 0;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.car_no {
  color: white;
  letter-spacing: 1px;
  font-weight: bold;
  background-color: #1e68bb;
  border-radius: 3px;
  border: white 0.5px solid;
  text-align: center;
  padding: 2px 5px;
  display: inline-block;
  box-shadow: 0 0 1px 2px #1e68bb;
}

.car_no_new {
  color: #000000;
  letter-spacing: 1px;
  font-weight: bold;
  background-image: linear-gradient(to top, #12c53e, #ffffff);
  border-radius: 3px;
  border: #000000 0.5px solid;
  text-align: center;
  padding: 2px 5px;
  display: inline-block;
  box-shadow: 0 0 1px 2px #85c085;
}

.dian {
  user-select: none;
}
</style>
